
use chrono::{Datelike, NaiveDate};
use leptos::prelude::*;
use leptos_icons::*;
use icondata as i;
use thaw_utils::ArcOneCallback;

const MAX_YEAR: i32 = (i32::MAX >> 13) / 10 - 1;
const MIN_YEAR: i32 = (i32::MIN >> 13) / 10 + 1;

#[component]
pub fn YearPanel(
    date_panel_show_date: RwSignal<NaiveDate>,
    close_panel: ArcOneCallback<Option<NaiveDate>>,
) -> impl IntoView {
    let show_min_year = RwSignal::new(date_panel_show_date.get_untracked().year() / 10);
    let previous_year_range = move |_| {
        show_min_year.update(|year| {
            if *year > MIN_YEAR {
                *year -= 1;
            }
        });
    };
    let next_year_range = move |_| {
        show_min_year.update(|year| {
            if *year < MAX_YEAR {
                *year += 1;
            }
        });
    };
    view! {
        <div class="card w-96 shadow-xl bg-base-100">
            <div class="card-body">
                <div class="card-title flex">
                    <div class="flex-none">
                        <button class="btn btn-ghost btn-sm" on:click=previous_year_range>
                            <Icon icon=i::AiArrowLeftOutlined />
                        </button>
                    </div>
                    <div class="flex-1 items-center text-center">
                        <button class="btn btn-ghost btn-sm">
                            {move || {
                                let year = show_min_year.get();
                                format!("{}0 - {}9", year, year)
                            }}
                        </button>
                    </div>
                    <div class="flex-none">
                        <button class="btn btn-ghost btn-sm" on:click=next_year_range>
                            <Icon icon=i::AiArrowRightOutlined />
                        </button>
                    </div>
                </div>
                <div class="grid grid-cols-4 gap-2">
                    {move || {
                        (-1..=10)
                            .map(|index| {
                                let year = show_min_year.get() * 10 + index;
                                let close_panel=close_panel.clone();
                                let on_click = move |_| {
                                    let new_date=NaiveDate::from_ymd_opt(year, 1, 1).unwrap();
                                    close_panel(Some(new_date))
                                };
                                view! { <YearPanelItem date_panel_show_date year on:click=on_click/> }
                            })
                            .collect_view()
                    }}

                </div>
            </div>
        </div>
    }
}

#[component]
fn YearPanelItem(date_panel_show_date: RwSignal<NaiveDate>, year: i32) -> impl IntoView {
    let is_selected = Memo::new(move |_| date_panel_show_date.with(|date| date.year() == year));

    view! {
        <div
            class="btn btn-ghost btn-sm"
            class=("border-violet-700", move || is_selected.get())
        >
            {year}
        </div>
    }
}
